<template>
   
  <div class="">
    <p>{{ money }}</p>
    {{ list }}
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
const money = ref(10)
// const money = ref<number>(10)

// 如果将来我们的数据是从服务器返回的
// {id:1,name:'吃饭',done: true}
type TodoItem = {
  id: number
  name: string
  done: boolean
}

// 注意：因为我们的数据是从服务器返回的，所以在定义模型的时候，必须先指定它的类型
// 基本上后面定义模型数据都是使用ref
// const list: Ref<never[]> 如果出现了never代表没有指定好类型
const list = ref<TodoItem[]>([])

type Book = {
  title: string
  year?: number
}
// reactive 用得相对来说少一些
const book: Book = reactive({ title: '明朝那些事' })
book.year = 2018

setTimeout(() => {
  list.value = [
    {
      id: 1,
      name: '吃饭',
      done: true
    },
    {
      id: 2,
      name: '睡觉',
      done: false
    }
  ]
}, 1000)
</script>

<style scoped></style>
